<template>
    <div>
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        :class="{'el-menu-vertical-demo-active': loginStore.isLoggedIn == true}"
        unique-opened
        router     
      >
        <el-sub-menu index="1" class="item">
          <template #title>
            <div class="icon"></div>
            <span class="title">备课中心</span>
          </template>
          <el-menu-item :index="checkLogin('/')">首页</el-menu-item>
          <el-menu-item :index="checkLogin('/aiDesign')">AI教学设计生成</el-menu-item>
          <el-menu-item :index="checkLogin('/aiSource')">AI教学资料生成</el-menu-item>
          <el-menu-item :index="checkLogin('/aiAnalysis')">AI教学学情分析</el-menu-item>
          <el-menu-item :index="checkLogin('/recent-source')">最近资料</el-menu-item>
          <el-menu-item :index="checkLogin('/design-template')">设计模板</el-menu-item>
          <el-menu-item :index="checkLogin('/source-template')">资料模板</el-menu-item>
          <el-menu-item :index="checkLogin('/analysis-template')">分析模板</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2" class="item">
          <template #title>
            <div class="icon"></div>
            <span class="title">AI工具箱</span>
          </template>
          <el-menu-item :index="checkLogin('/chat')">AI对话</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3" class="item">
          <template #title>       
            <div class="icon"></div>
            <span class="title">个人中心</span>
          </template>
          <el-menu-item index="/personal">个人中心</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4" class="item">
          <template #title>       
            <div class="icon"></div>
            <span class="title">系统设置</span>
          </template>
          <el-menu-item index="/ai-preference">AI偏好</el-menu-item>
          <el-menu-item index="/privacy">数据与隐私</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
</template>

<script setup lang="ts">
import { useLoginStore } from '@/stores/login';
const loginStore = useLoginStore()
function checkLogin(targetPath: string) {
  const allowedRoutes = ['/login/account', '/login/vertification', '/login/register'];
  if (!loginStore.isLoggedIn && !allowedRoutes.includes(targetPath)) {
    return '/login/account';
  }
  return targetPath;
}
</script>

<style scoped lang="less">
@import url('@/components/Menu/index.less');
</style>